<template>
  <div class="home">
    <div class="head">
      <img :src="banner" alt class="headImg" />
      <i class="light" :class="{ lightM: timeLoop % 6 == 0 }"></i>
    </div>
    <div class="timeDown">
      <div class="title">活动结束倒计时</div>
      <div class="timeBox">
        <div>
          <span>{{ currentTime.d }}</span>
          <span class="c_t">天</span>
        </div>
        <div>
          <span>{{ currentTime.h }}</span>
          <span class="c_t">时</span>
        </div>
        <div>
          <span>{{ currentTime.m }}</span>
          <span class="c_t">分</span>
        </div>
        <div>
          <span>{{ currentTime.s }}</span>
          <span class="c_t">秒</span>
        </div>
      </div>
      <div class="process">
        <div class="progressBar stripes">
          <span :style="{ width: percent * 100 + '%' }"></span>
        </div>
        <div class="p_txt">
          <span class="p_l">
            活动限额
            <span class="yellow">{{ limitPeople }}</span> 人
          </span>
          <span class="p_r">
            进度
            <span class="yellow">{{ percent * 100 }}</span> %
          </span>
        </div>
      </div>
    </div>
    <div class="headSet">
      <div class="top">
        <span class="left">
          已购买
          <span class="red">{{ buyCount }}</span> 人
        </span>
        <div class="line"></div>
        <span class="right">
          <span class="red">{{ scanCount }}</span> 次浏览
        </span>
      </div>
      <div class="headBox">
        <i class="light" :class="{ lightM: timeLoop % 6 == 0 }"></i>
        <img
          v-for="(item, index) in scanUserList"
          :key="index"
          :src="item.headimgurl"
          alt
        />
      </div>
    </div>
    <div class="rankList" v-if="rank.length > 0">
      <div class="title">红包排行榜</div>
      <div class="rankBox">
        <div :style="{opacity: rank[1] ? 1 : 0}">
          <img
            :src="
              rank[1]
                ? rank[1].headimgurl
                : 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTI8DLZrUXqaZgpMQlfqIQsKYxLhqCib7Vph5PFm1n3LsDEZrNJpcEiaiabZ6cK09zxgJkF7WMynuD9AQ/132'
            "
            alt
            class="img_left"
          />
          <span class="second">2</span>
        </div>
        <div class="middle" :style="{opacity: rank[0] ? 1 : 0}">
          <img
            :src="
              rank[0]
                ? rank[0].headimgurl
                : 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTI8DLZrUXqaZgpMQlfqIQsKYxLhqCib7Vph5PFm1n3LsDEZrNJpcEiaiabZ6cK09zxgJkF7WMynuD9AQ/132'
            "
            alt
            class="img_middle"
          />
          <span class="first">1</span>
        </div>
        <div :style="{opacity: rank[2] ? 1 : 0}">
          <img
            :src="
              rank[2]
                ? rank[2].headimgurl
                : 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTI8DLZrUXqaZgpMQlfqIQsKYxLhqCib7Vph5PFm1n3LsDEZrNJpcEiaiabZ6cK09zxgJkF7WMynuD9AQ/132'
            "
            alt
            class="img_right"
          />
          <span class="third">3</span>
        </div>
      </div>
      <div class="nameBox">
        <div class="nameItem">
          <div class="name" v-show="rank[1]">
            {{ rank[1] ? rank[1].nickname : "" }}
          </div>
          <div class="price" v-show="rank[1]">
            {{ rank[1] ? rank[1].redPacket / 100 : "" }}元
          </div>
        </div>
        <div class="nameItem">
          <div class="name" v-show="rank[0]">
            {{ rank[0] ? rank[0].nickname : "" }}
          </div>
          <div class="price" v-show="rank[0]">
            {{ rank[0] ? rank[0].redPacket / 100 : "" }}元
          </div>
        </div>
        <div class="nameItem">
          <div class="name" v-show="rank[2]">
            {{ rank[2] ? rank[2].nickname : "" }}
          </div>
          <div class="price" v-show="rank[2]">
            {{ rank[2] ? rank[2].redPacket / 100 : "" }}元
          </div>
        </div>
      </div>
      <div class="rankTitle">
        <span>排行榜</span>
        <span>微信名</span>
        <span>红包排行</span>
      </div>
      <div class="scroll-wrap">
        <div class="scroll-content" :style="{ top, transition }">
          <div
            v-for="(item, index) in rank"
            :key="index"
            class="ctx"
            style=" height: 80px;"
          >
            <span>{{ index + 1 }}</span>
            <img :src="item.headimgurl ? item.headimgurl : ''" alt />
            <span class="name">{{ item.nickname }}</span>
            <span class="red">获得红包 {{ item.redPacket / 100 }}元</span>
          </div>
        </div>
      </div>
    </div>
    <div class="actList">
      <div class="title">活动详情</div>
      <img src="@/assets/1586942126992652.jpg" alt />
      <img src="@/assets/1585980269774150.jpg" alt />
      <img src="@/assets/1586952012931426.jpg" alt />
      <img src="@/assets/1586953330440729.jpg" alt />
      <img src="@/assets/1586942210649287.jpg" alt />
      <img src="@/assets/1586952069909932.jpg" alt />
      <a href="tel:10086">
        <img src="@/assets/1575711855315435.png" alt />
      </a>
    </div>
    <div class="scroll-wrap1" v-if="latestOrderList.length > 0">
      <div
        class="scroll-content"
        :style="{ top: top1, transition: transition1 }"
      >
        <div
          v-for="(item, index) in latestOrderList"
          :key="index"
          class="ctx G-height"
        >
          <div
            class="fixL"
            :class="{
              item_in: activeIndex1 - item.l_index == -2 && item.l_index != 2,
              item_act:
                Math.abs(activeIndex1 - item.l_index) == 1 ||
                (activeIndex1 == 0 && item.l_index == 2),
              item_out: item.l_index < activeIndex1,
              item_n: Math.abs(activeIndex1 - item.l_index) >= 2,
            }"
          >
            <img :src="item.headimgurl" alt />
            <span class="name">{{ item.nickname }} 成功支付</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom_fix">
      <div class="box">
        <div class="left" @click="share">活动海报</div>
        <div class="right" @click="showPay">立即购买</div>
      </div>
    </div>
    <div class="btn1" :class="clicked ? 'btnn' : ''" @click="play">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
    <div class="btn2" @click="showPop">
      <img src="@/assets/ic_dianhua.png" alt />
    </div>
    <audio :src="music" loop autoplay></audio>
    <van-popup v-model="show">
      <div class="context">
        <div class="title">【商家门店地址电话】</div>
        <div class="phoneBox">
          <span class="phone">{{ officePhone }}</span>
          <a href="tel:17854202537">一键拨打</a>
        </div>
        <img class="qrcode" :src="officeQRCode" alt />
      </div>
      <div class="txt">【活动商户】长按图片添加门店接待微信！</div>
    </van-popup>
    <div class="mine" @click="gomine">我的</div>
    <van-popup v-model="showPhone" round position="bottom" class="popBottom">
      <van-field v-model="value" border placeholder="请输入您的姓名" />
      <van-field
        v-model="phone"
        type="tel"
        border
        maxlength="11"
        placeholder="请输入您的电话"
      />
      <button class="btn" @click="pay">立即购买</button>
    </van-popup>
    <van-popup v-model="showEnd" class="endPop">
      <div class="end">活动已结束</div>
    </van-popup>
  </div>
</template>

<script>
// @ is an alias to /src
// tslint:disable
import { getCurrentTime } from "@/util/common";
import { getInfo, getWxPay, addCount, addPhone } from "@/api/index";
import wx from "weixin-js-sdk";
import { Toast } from "vant";
import store from "@/store";

export default {
  data() {
    return {
      timeLoop: 0,
      value: "",
      phone: "",
      showPhone: false,
      showEnd: false,
      currentTime: {
        d: 0,
        h: 0,
        m: 0,
        s: 0,
      },
      transition: "top 0.5s",
      transition1: "top 0.5s",
      activeIndex: 0,
      activeIndex1: 0,
      intnum: null,
      prizeList: [],
      timeStep: 2160000000,
      clicked: true,
      show: false,
      clientHeight: 0,
      buyCount: 0, // 已购买人数
      banner: "", // 首页banner图
      detailImg: "", // 活动详情图
      music: "http://mp32.9ku.com/upload/128/2017/08/14/864869.mp3", // 背景音乐
      rank: [], // 红包排行榜
      servicePhone: 0, // 招商电话
      serviceQRCode: "", // 招商二维码
      officeQRCode: "", // 商家门店二维码
      officePhone: 0, // 商家门店电话
      latestOrderList: [],
      limitPeople: 0, // 活动限额
      percent: 0,
      scanCount: 0,
      sourceUserId: this.$route.query.sourceUserId || "",
      scanUserList: [],
    };
  },
  computed: {
    top() {
      return -this.activeIndex * 80 + "px";
    },
    top1() {
      return -this.activeIndex1 * this.clientHeight + "px";
    },
  },
  methods: {
    showPay() {
      this.showPhone = true;
    },
    _getInfo() {
      getInfo().then((res) => {
        console.log("res", res);
        this.timeStep = res.data.time < 0 ? 0 : res.data.time;
        this.limitPeople = res.data.limitPeople;
        this.servicePhone = res.data.servicePhone;
        this.officePhone = res.data.officePhone;
        this.officeQRCode = res.data.officeQRCode;
        this.music = res.data.music;
        this.buyCount = res.data.buyCount;
        this.rank = res.data.rank;
        this.latestOrderList = res.data.latestOrderList;
        this.banner = res.data.banner;
        this.percent = res.data.percent;
        this.scanCount = res.data.scanCount;
        this.scanUserList = res.data.scanUserList;
        if (res.data.rank.length > 0) {
          for (let i = 0; i < this.rank.length; i++) {
            this.rank[i].index = i + 1;
          }
          let rank = this.rank;
          rank.forEach((item) => {
            const obj = Object.create(item);
            obj.nickname = item.nickname;
            obj.headimgurl = item.headimgurl;
            obj.redPacket = item.redPacket;
            obj.l_index = rank.length + this.rank.length;
            this.rank.push(obj);
          });
        }
        if (res.data.latestOrderList.length > 0) {
          for (let i = 0; i < this.latestOrderList.length; i++) {
            this.latestOrderList[i].l_index = i;
          }
          let latestOrderList = res.data.latestOrderList;
          latestOrderList.forEach((item) => {
            const obj1 = Object.create(item);
            obj1.nickname = item.nickname;
            obj1.headimgurl = item.headimgurl;
            obj1.l_index = latestOrderList.length + this.latestOrderList.length;
            this.latestOrderList.push(obj1);
          });
        }
        this.$nextTick(() => {
          this.clientHeight = document.getElementsByClassName(
            "G-height"
          )[0].clientHeight;
        });
      });
    },
    share() {
      this.$router.push({
        name: "share",
        query: {
          auth: this.$route.query.auth,
          sourceUserId: this.$route.query.sourceUserId
        }
      });
    },
    pay() {
      let re = "1[3|4|5|6|7|8|9][0-9]\\d{8}";
      let that = this;
      let pe = /^[\u4e00-\u9fa5]+$/;
      if (this.timeStep > 0) {
        if (!that.phone.match(re)) {
          Toast.fail("手机号不正确");
          return;
        }
        if (that.value == "") {
          Toast.fail("请输入姓名");
          return;
        } else if (!pe.test(that.value)) {
          Toast.fail("姓名不合法");
          return;
        }
        const params = {
          phone: that.phone,
          name: that.value,
        };
        addPhone(params).then((res) => {});
        this._getWxPay();
      } else {
        this.showEnd = true;
      }
    },
    gomine() {
      this.$router.push({
        name: "mine",
        query: {
          auth: this.$route.query.auth,
          sourceUserId: this.$route.query.sourceUserId
        }
      });
    },
    play() {
      this.clicked = !this.clicked;
      if (this.clicked) {
        document.getElementsByTagName("audio")[0].play();
      } else {
        document.getElementsByTagName("audio")[0].pause();
      }
    },
    showPop() {
      this.show = true;
    },
    _getWxPay() {
      getWxPay(this.sourceUserId).then((res) => {
        console.log("res", res);
        var appId = res.data.appId;
        var timeStamp = res.data.timeStamp;
        var nonceStr = res.data.nonceStr;
        var packageValue = res.data.packageValue;
        var signType = res.data.signType;
        var paySign = res.data.paySign;
        this._onBridgeReady({
          appId,
          timeStamp,
          nonceStr,
          packageValue,
          signType,
          paySign,
        });
      });
    },
    _onBridgeReady({
      appId,
      timeStamp,
      nonceStr,
      packageValue,
      signType,
      paySign,
    }) {
      var that = this;
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: appId, //公众号名称，由商户传入
          timeStamp: timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: nonceStr, //随机串
          package: packageValue,
          signType: signType, //微信签名方式：
          paySign: paySign, //微信签名
        },
        function(res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          }
        }
      );

      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            onBridgeReady,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
          document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
        }
      }
    },
  },

  created() {
    this.$store.commit("SET_USERTOKEN", this.$route.query.auth);
    this.$store.commit("SET_SOURCEUSERID", this.$route.query.sourceUserId);
    this._getInfo();
    addCount().then((res) => {});
    this.intnum = setInterval(() => {
      this.timeLoop++;
      if (this.timeLoop % 2 === 0) {
        this.activeIndex += 1;
        this.activeIndex1 += 1;
      }
      if (this.activeIndex == this.rank.length / 2) {
        setTimeout(() => {
          this.transition = "none";
          this.activeIndex = 0;
          setTimeout(() => {
            this.transition = "top 0.5s";
          }, 500);
        }, 500);
      }
      if (this.activeIndex1 == this.latestOrderList.length / 2) {
        setTimeout(() => {
          this.transition1 = "none";
          this.activeIndex1 = 0;
          setTimeout(() => {
            this.transition1 = "top 0.5s";
          }, 500);
        }, 500);
      }
      if (this.timeStep < 1000) {
        this.timeStep = 0;
        this.currentTime = getCurrentTime(this.timeStep);
      } else {
        this.timeStep -= 1000;
      }
      this.currentTime = getCurrentTime(this.timeStep);
    }, 1000);
  },
};
</script>

<style lang="less" scoped>
.van-popup {
  background-color: transparent;
}
.end {
  margin: 40px auto;
  font-size: 15px;
  width: 320px;
}
.endPop {
  background-color: #fff;
}
.van-field {
  width: 80%;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-top: 20px;
}
.btn {
  width: 80%;
  height: 38px;
  background-color: #e3476f;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  color: #fff;
  border: none;
  border-radius: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.mine {
  height: 50px;
  width: 50px;
  position: fixed;
  bottom: 100px;
  right: 10px;
  border-radius: 50%;
  font-size: 14px;
  background-color: #fb5e32;
  color: #fff;
  line-height: 50px;
}
.popBottom {
  width: 100%;
  overflow: hidden;
  background-color: #fff;
}
.context {
  width: 290px;
  padding-top: 30px;
  border-radius: 10px;
  background-color: #fff;
  .title {
    font-size: 16px;
    text-align: center;
  }
  .phoneBox {
    text-align: center;
    margin-top: 20px;
    .phone {
      font-size: 14px;
      display: inline-block;
      line-height: 50px;
      height: 50px;
    }
    a {
      display: inline-block;
      height: 30px;
      line-height: 30px;
      font-size: 15px;
      color: #fff;
      background-color: #fb5e32;
      border-radius: 10px;
      padding: 0 10px;
      margin-left: 20px;
    }
  }
  .qrcode {
    width: 220px;
    margin-bottom: 20px;
  }
}
.txt {
  font-size: 14px;
  color: #ccc;
}
.btn2 {
  position: fixed;
  right: 0;
  top: 120px;
  width: 40px;
  background-color: #fb5e32;
  height: 35px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  text-align: center;
  img {
    width: 20px;
    margin-top: 8px;
  }
}
@keyframes line1 {
  0% {
    height: 22px;
  }
  50% {
    height: 10px;
  }
  100% {
    height: 22px;
  }
}
@keyframes line2 {
  0% {
    height: 14px;
  }
  50% {
    height: 22px;
  }
  100% {
    height: 14px;
  }
}
@keyframes line3 {
  0% {
    height: 10px;
  }
  50% {
    height: 22px;
  }
  100% {
    height: 10px;
  }
}
.btnn {
  .line1 {
    animation: line1 1s ease-in-out infinite;
  }
  .line2 {
    animation: line2 1s ease-in-out infinite;
  }
  .line3 {
    animation: line3 1s ease-in-out infinite;
  }
}
.btn1 {
  position: fixed;
  right: 0;
  width: 40px;
  background-color: #fb5e32;
  height: 35px;
  top: 60px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  .line1 {
    width: 4px;
    background-color: #fff;
    position: absolute;
    height: 22px;
    bottom: 5px;
    left: 10px;
  }
  .line2 {
    width: 4px;
    background-color: #fff;
    position: absolute;
    height: 10px;
    bottom: 5px;
    left: 20px;
  }
  .line3 {
    width: 4px;
    background-color: #fff;
    position: absolute;
    height: 14px;
    transition: height 1.5s;
    bottom: 5px;
    left: 30px;
  }
}
.bottom_fix {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  background-color: #fff;
  padding-bottom: 10px;
  padding-top: 10px;
  .box {
    width: 350px;
    margin: 0 auto;
    height: 40px;
    border-radius: 20px;
    overflow: hidden;
    line-height: 40px;
    .left {
      width: 50%;
      float: left;
      background-color: #fdd559;
      color: #000;
      font-size: 14px;
    }
    .right {
      width: 50%;
      float: right;
      background-color: #fb5e32;
      color: #fff;
      font-size: 14px;
    }
  }
}
.home {
  background-color: #f0f0f0;
}
.red {
  color: red;
}
.head {
  position: relative;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  .headImg {
    width: 100vw;
  }
  .light {
    cursor: pointer;
    position: absolute;
    left: -180px;
    top: 0;
    width: 40px;
    height: 100%;
    background-image: -webkit-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0)
    );
    background-image: -moz-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0)
    );
    background-image: -o-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0)
    );
    background-image: -ms-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0)
    );
    background-image: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0)
    );

    -webkit-transform: skewx(-25deg);
    -moz-transform: skewx(-25deg);
    -o-transform: skewx(-25deg);
    -ms-transform: skewx(-25deg);
    transform: skewx(-25deg);
  }

  .lightM {
    left: 150vw;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -ms-transition: 1s;
    transition: 1s;
  }
}
.timeDown {
  width: 350px;
  border-radius: 10px;
  margin: 0 auto;
  background-color: #fff;
  padding-top: 20px;
  overflow: hidden;
  margin-top: 10px;
  .title {
    font-size: 18px;
  }
  .timeBox {
    overflow: hidden;
    div {
      width: 87.5px;
      float: left;
      text-align: center;
    }
    span {
      font-weight: 700;
    }
    .c_t {
      display: block;
      font-size: 14px;
    }
  }
  .process {
    background-color: #fb5e32;
    padding-top: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
    .p_txt {
      color: #fff;
      font-size: 16px;
      text-align: left;
      padding-left: 15px;
      padding-right: 15px;
      margin-top: 8px;
    }
    .yellow {
      color: #fdd559;
    }
    .p_r {
      float: right;
    }
  }
}
.headSet {
  background-color: #fff;
  width: 350px;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 20px;
  line-height: 25px;
  padding: 10px 20px 0 20px;
  box-sizing: border-box;
  .top {
    font-size: 18px;
    font-weight: 700;
    width: 100%;
    overflow: hidden;
    .left {
      float: left;
    }
    .right {
      float: right;
    }
  }
  .line {
    display: inline-block;
    height: 25px;
    width: 2px;
    background-color: #000;
    margin: 0 auto;
  }
  .headBox {
    position: relative;
    overflow: hidden;
    .light {
      cursor: pointer;
      position: absolute;
      left: -180px;
      top: 0;
      width: 40px;
      height: 100%;
      background-image: -webkit-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0)
      );
      background-image: -moz-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0)
      );
      background-image: -o-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0)
      );
      background-image: -ms-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0)
      );
      background-image: linear-gradient(
        0deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0)
      );

      -webkit-transform: skewx(-25deg);
      -moz-transform: skewx(-25deg);
      -o-transform: skewx(-25deg);
      -ms-transform: skewx(-25deg);
      transform: skewx(-25deg);
    }

    .lightM {
      left: 150vw;
      -webkit-transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -ms-transition: 1s;
      transition: 1s;
    }
    img {
      margin: 5px;
      width: 41px;
      border-radius: 50%;
    }
  }
}
.stripes span {
  background-size: 25px 25px;
  background-image: linear-gradient(
    45deg,
    rgba(255, 154, 175, 1) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 154, 175, 1) 50%,
    rgba(255, 154, 175, 1) 75%,
    transparent 75%,
    transparent
  );
  animation: animate-stripes 3s linear infinite;
}

@keyframes animate-stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100px 0;
  }
}
.progressBar {
  background-color: #fb5e32;
  height: 10px;
  // padding: 2px;
  width: 320px;
  margin: 0 auto;
  border-radius: 30px;
  border: 2px solid #fff;
}

.progressBar span {
  display: block;
  height: 100%;
  border-radius: 30px;
  transition: width 0.4s ease-in-out;
  background-color: #fff;
}
.rankList {
  background-color: #fff;
  width: 350px;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 20px;
  box-sizing: border-box;
  padding-top: 30px;
  .title {
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
  }
  .rankBox {
    .img_left,
    .img_right {
      width: 50px;
      border-radius: 50%;
      border: 3px solid #ffffff;
    }
    .img_middle {
      width: 70px;
      border-radius: 50%;
      border: 3px solid #ffffff;
    }
    div {
      width: 56px;
      height: 56px;
      display: inline-block;
      border: 1px solid #000;
      border-radius: 50%;
      position: relative;
    }
    .middle {
      width: 76px;
      height: 76px;
      margin: 0 40px;
    }
    span {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: inline-block;
      bottom: -10px;
      font-size: 14px;
      color: #fff;
    }
    .first {
      background-color: #fdd559;
      left: 28px;
    }
    .second {
      background-color: #e1476d;
      left: 18px;
    }
    .third {
      background-color: #1f4171;
      left: 18px;
    }
  }
  .nameBox {
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
    .nameItem {
      width: 33.3%;
      min-height: 40px;
      float: left;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 18px;
      font-weight: 700;
      .name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 80%;
        text-align: center;
        margin: 0 auto;
      }
      .price {
        font-size: 13px;
        color: red;
      }
    }
  }
  .rankTitle {
    height: 50px;
    background-color: #fb5e32;
    line-height: 50px;
    color: #fff;
    font-size: 14px;
    text-align: left;
    span:first-of-type {
      margin-left: 10px;
      margin-right: 20px;
    }
    span:last-of-type {
      float: right;
      margin-right: 50px;
    }
  }

  p {
    margin: 0;
    padding: 0;
  }
  .item_n {
    opacity: 0;
  }
  .item_act {
    opacity: 1;
  }
  .item_in {
    transition: all 1s;
    opacity: 1;
  }
  .item_out {
    transition: all 0.5s;
    opacity: 0;
  }
  .scroll-wrap {
    height: 400px;
    position: relative;
    overflow: hidden;
  }
  .scroll-content {
    position: relative;
    transition: top 0.5s;
  }
  .scroll-content .ctx {
    line-height: 80px;
    text-align: left;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .ctx {
    img {
      width: 40px;
      border-radius: 50%;
      line-height: 80px;
      transform: translateY(-20px);
    }
    span {
      margin-right: 30px;
      font-size: 14px;
      display: inline-block;
      overflow: hidden;
    }
    .name {
      font-size: 15px;
      margin-left: 10px;
      font-weight: 700;
      display: inline-block;
      width: 80px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 80px;
      margin-right: 30px;
    }
    .red {
      margin: 0;
      width: 120px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
.scroll-wrap1 {
  background-color: transparent;
  height: 150px;
  position: fixed;
  left: 20px;
  bottom: 60px;
  .fixL {
    overflow: hidden;
  }
  img {
    width: 35px;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
  }
  p {
    margin: 0;
    padding: 0;
  }
  .ctx {
    text-align: left;
    box-sizing: content-box;
    height: 50px;
  }
  .name {
    font-size: 14px;
    height: 34px;
    line-height: 34px;
    border-radius: 30px;
    background-color: #333;
    color: #fff;
    box-sizing: border-box;
    padding: 0 10px;
    float: left;
  }
  .item_n {
    opacity: 0;
  }
  .item_act {
    opacity: 1;
  }
  .item_in {
    transition: all 1s;
    opacity: 1;
  }
  .item_out {
    transition: all 0.5s;
    opacity: 0;
  }
  .scroll-content {
    position: relative;
    transition: top 0.5s;
  }
  .scroll-content .ctx {
    text-align: center;
  }
}
.actList {
  width: 350px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 200px;
  .title {
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    height: 26px;
    margin: 20px auto;
  }
  img {
    width: 100%;
  }
}
</style>
